import React, { KeyboardEvent, KeyboardEventHandler } from "react";

interface Props {
  onEnter: (value: string) => void;
}

class TodoHeader extends React.Component<Props> {
  handleKeyUp: KeyboardEventHandler<HTMLInputElement> = (event) => {
    if (event.keyCode === 13) {
      // console.log("回车了");

      // 1. 获取输入值
      const value = event.currentTarget.value;
      // console.log("value", value);

      // 2. 调用 props.onEnter
      this.props.onEnter(value);

      // 3. 清空value值
      event.currentTarget.value = "";
    }
  };

  render(): React.ReactNode {
    return (
      <div>
        <h1>Todos</h1>

        <input type="text" onKeyUp={this.handleKeyUp} />
      </div>
    );
  }
}

export default TodoHeader;
